<template>
  <el-form :model="componentParams" label-width="7em">
    <el-form-item label="组件名称" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.name" placeholder="请输入组件名称"></el-input>
    </el-form-item>
    <el-form-item label="图标" style="margin-bottom: 10px;">
<!--      <el-input v-model="componentParams.iconPath" placeholder="请输入图标路径"></el-input>-->
      <el-select v-model="componentParams.iconPath" placeholder="请选择">
        <el-option
          v-for="item in iconList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <span style="float: left"><i :class="['fa',item.label]"></i></span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>

    </el-form-item>
    <el-form-item label="描述" style="margin-bottom: 10px;">
      <el-input type="textarea" maxlength="300" v-model="componentParams.description" placeholder="请输入描述"></el-input>
    </el-form-item>

    <el-form-item label="开发者" style="margin-bottom: 10px;">
<!--      <el-input v-model="componentParams.responsible" placeholder="请输入责任人"></el-input>-->
      <el-input v-model="componentParams.responsible" placeholder="请输入开发者"></el-input>
    </el-form-item>
   <el-form-item label="算法服务" style="margin-bottom: 10px;">
     <el-select v-model="componentParams.targetAlgorithm" filterable placeholder="请选择，可根据算法名称快速搜索">
       <el-option v-for="item in options" :label="item.label" :key="item.value" :value="item.value"></el-option>
     </el-select>
   </el-form-item>
    <el-form-item label="版本" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.version" placeholder="请输入版本"></el-input>
    </el-form-item>

    <el-form-item label="专业" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.domain" placeholder="请输入专业"></el-input>
    </el-form-item>

    <el-form-item label="URL" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.webUrl" placeholder="请输入URL"></el-input>
    </el-form-item>

    <el-form-item label="部门" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.department" placeholder="请输入部门"></el-input>
    </el-form-item>

    <el-form-item label="密级" style="margin-bottom: 10px;">
      <el-radio-group v-model="componentParams.secretLevel">
        <el-radio :label="item.value"
                  style="margin-right: 5px;"
                  v-for="(item,index) in [{value:'非密',label:'非密'},{value:'秘密',label:'秘密'},{value:'机密',label:'机密'}]"
                  :key="index"><span :style="{fontWeight:'bolder',color:index == 0 ? 'green' : (index == 1 ? 'orange' : 'red')}">{{ item.label }}</span></el-radio>
        <!--          :disabled="item.disabled"-->
      </el-radio-group>
    </el-form-item>

    <el-form-item label="代码路径" style="margin-bottom: 10px;">
      <el-input v-model="componentParams.modelPath" placeholder="代码路径"></el-input>
    </el-form-item>


<!--    <el-form-item label="输入节点数">-->
<!--      <el-input-number title="定义组件输入数据源的最小数目" v-model="componentParams.minimumInput" :min="0"-->
<!--                       :max="4"></el-input-number>-->
<!--    </el-form-item>-->
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <el-form-item label="是否支持PMML" label-width="9em">-->
<!--          <el-switch active-text="" inactive-text="" v-model="componentParams.supportPMML"></el-switch>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-form-item label="是否能够查看源码" label-width="9em">-->
<!--          <el-switch active-text="" inactive-text="" v-model="componentParams.allowViewSource"></el-switch>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <el-form-item label="是否查看运行报告" label-width="9em">-->
<!--          <el-switch active-text="" inactive-text="" v-model="componentParams.hasReport"></el-switch>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-form-item label="组件是否可用" label-width="9em">-->
<!--          <el-switch active-text="" inactive-text="" v-model="componentParams.enabled"></el-switch>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-form-item label="组件分类">-->
<!--      <div class="tree-menu" id="basicClass">-->
<!--        <ul v-for="componentItem in componentsList[0].children" :key="componentItem.id">-->
<!--          <ClassTree :item="componentItem"></ClassTree>-->
<!--        </ul>-->
<!--      </div>-->
<!--    </el-form-item>-->

  </el-form>
</template>
<style>
</style>
<script>
import ClassTree from "./message/ClassTree.vue";

export default {
  name: "BasicMessage",
  data() {
    return {
      options: [],
      iconList:[
        {label:'fa-joomla',value:'fa-joomla'},
        {label:'fa-support',value:'fa-support'},
        {label:'fa-paper-plane',value:'fa-paper-plane'},
        {label:'fa-bell',value:'fa-bell'},
        {label:'fa-exchange',value:'fa-exchange'},
        {label:'fa-random',value:'fa-random'},
        {label:'fa-cubes',value:'fa-cubes'},
        {label:'fa-refresh',value:'fa-refresh'},
        {label:'fa-rotate-left',value:'fa-rotate-left'},
        {label:'fa-pause',value:'fa-pause'},
        {label:'fa-play',value:'fa-play'},
        {label:'fa-stop',value:'fa-stop'},
        {label:'fa-question-circle',value:'fa-question-circle'},
        {label:'fa-reply',value:'fa-reply'},
        {label:'fa-star',value:'fa-star'},
        {label:'fa-spinner',value:'fa-spinner'},
        {label:'fa-folder-o',value:'fa-folder-o'},
        {label:'fa-save',value:'fa-save'},
        {label:'fa-chevron-up',value:'fa-chevron-up'},
        {label:'fa-chevron-down',value:'fa-chevron-down'},
        {label:'fa-chevron-left',value:'fa-chevron-left'},
        {label:'fa-chevron-right',value:'fa-chevron-right'},
        {label:'fa-pencil',value:'fa-pencil'},
        {label:'fa-bug',value:'fa-bug'},
      ]
    };
  },
  created: function() {
    var that = this;
    this.$.ajax({
      url: that.$store.state.global.httpServer + "/api/algorithm/list",
      method: "get",
      type: "json",
      beforeSend: function(xhr) {
        xhr.setRequestHeader("accessToken", localStorage.accessToken);
      },
      success: function(response) {
        var data = response.data;
        that.options = [];
        for (var p in data) {
          var child = {};
          child["value"] = data[p];
          child["label"] = p;
          that.options.push(child);
        }
      },
      error: function(data) {
        that.$notify({
          title: "提示",
          message: "获取算法服务失败！",
          type: "warning"
        });
      }
    });
  },
  computed: {
    componentsDeals() {
      return this.$store.state.systemComponent.componentsDeals;
    },
    componentParams: function() {
      // console.log('componentParams >>>>>>',JSON.parse(JSON.stringify(this.componentsDeals.editComponent)));
      //组件参数
      return this.componentsDeals.editComponent;
    },
    componentsList: function() {
      //树形菜单
      return this.$store.state.systemComponent.menuComponentsTree;
    },
    basicMessageSelectClass: function() {
      //选择分类
      return this.componentsDeals.basicMessageSelectClass;
    }
  },
  methods: {
    changeEngine: function() {
      //主要是用来重新渲染脚本编辑区的js加载效果
      this.componentsDeals.basicScriptDeals.showEditor = false;
      var that = this;
      setTimeout(function() {
        that.componentsDeals.basicScriptDeals.showEditor = true;
      }, 10);
    }
  },
  components: {
    ClassTree
  }
};
</script>
